<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper
          activeColor="#52EDE3"
          ref="tabs"
          :list="list"
          :current="current"
          @change="change"
          :is-scroll="false"
          swiperWidth="750"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <!-- 待发货 -->
        <swiper-item class="swiper-item">
          <scroll-view
            scroll-y
            style="height: 100%; width: 100%"
            @scrolltolower="reachBottom"
          >
            <view class="page-box">
              <div class="card" v-for="(item, index) in sendList" :key="index">
                <div class="info">
                  <div class="shop_name">
                    <image :src="item.icon" mode="aspectFit" class="icon" />
                    <text class="name">
                      {{ item.shopName }}
                    </text>
                  </div>
                  <div class="status">{{ item.status }}</div>
                </div>
                <div class="goods">
                  <div class="left">
                    <image
                      :src="item.img"
                      mode="scaleToFill"
                      class="goods_img"
                    />
                  </div>
                  <div class="middle">
                    <div class="goods_describe">
                      {{ item.describe }}
                    </div>
                    <div class="goods_size">
                      {{ item.size }}
                    </div>
                  </div>
                  <div class="right">
                    <div class="goods_amount">
                      {{ '￥:' + item.amount }}
                    </div>
                    <div class="goods_num">
                      {{ 'X' + item.num }}
                    </div>
                  </div>
                </div>
                <div class="operate">
                  <div class="operate_but">
                    <u-button size="mini"> 催发货 </u-button>
                  </div>
                  <div class="operate_but">
                    <u-button size="mini"> 去退款 </u-button>
                  </div>
                </div>
              </div>
            </view>
          </scroll-view>
        </swiper-item>
        <!-- 待收货 -->
        <swiper-item class="swiper-item">
          <scroll-view
            scroll-y
            style="height: 100%; width: 100%"
            @scrolltolower="reachBottom"
          >
            <view class="page-box">
              <view class="page-box">
                <div
                  class="card"
                  v-for="(item, index) in takeList"
                  :key="index"
                >
                  <div class="info">
                    <div class="shop_name">
                      <image :src="item.icon" mode="aspectFit" class="icon" />
                      <text class="name">
                        {{ item.shopName }}
                      </text>
                    </div>
                    <div class="status">{{ item.status }}</div>
                  </div>
                  <div class="goods">
                    <div class="left">
                      <image
                        :src="item.img"
                        mode="scaleToFill"
                        class="goods_img"
                      />
                    </div>
                    <div class="middle">
                      <div class="goods_describe">
                        {{ item.describe }}
                      </div>
                      <div class="goods_size">
                        {{ item.size }}
                      </div>
                    </div>
                    <div class="right">
                      <div class="goods_amount">
                        {{ '￥:' + item.amount }}
                      </div>
                      <div class="goods_num">
                        {{ 'X' + item.num }}
                      </div>
                    </div>
                  </div>
                  <div class="operate">
                    <div class="operate_but">
                      <u-button size="mini">确认收货</u-button>
                    </div>
                    <div class="operate_but">
                      <u-button size="mini">再来一单</u-button>
                    </div>
                  </div>
                </div>
              </view>
            </view>
          </scroll-view>
          <!-- 待付款 -->
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view
            scroll-y
            style="height: 100%; width: 100%"
            @scrolltolower="reachBottom"
          >
            <view class="page-box">
              <view class="page-box">
                <div class="card" v-for="(item, index) in payList" :key="index">
                  <div class="info">
                    <div class="shop_name">
                      <image :src="item.icon" mode="aspectFit" class="icon" />
                      <text class="name">
                        {{ item.shopName }}
                      </text>
                    </div>
                    <div class="status">{{ item.status }}</div>
                  </div>
                  <div class="goods">
                    <div class="left">
                      <image
                        :src="item.img"
                        mode="scaleToFill"
                        class="goods_img"
                      />
                    </div>
                    <div class="middle">
                      <div class="goods_describe">
                        {{ item.describe }}
                      </div>
                      <div class="goods_size">
                        {{ item.size }}
                      </div>
                    </div>
                    <div class="right">
                      <div class="goods_amount">
                        {{ '￥:' + item.amount }}
                      </div>
                      <div class="goods_num">
                        {{ 'X' + item.num }}
                      </div>
                    </div>
                  </div>
                  <div class="operate">
                    <div class="operate_but">
                      <u-button size="mini"> 去付款 </u-button>
                    </div>
                    <div class="operate_but">
                      <u-button size="mini">取消订单</u-button>
                    </div>
                  </div>
                </div>
              </view>
            </view>
          </scroll-view>
          <!-- 待评价 -->
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view
            scroll-y
            style="height: 100%; width: 100%"
            @scrolltolower="reachBottom"
          >
            <view class="page-box">
              <view class="page-box">
                <div
                  class="card"
                  v-for="(item, index) in rateList"
                  :key="index"
                >
                  <div class="info">
                    <div class="shop_name">
                      <image :src="item.icon" mode="aspectFit" class="icon" />
                      <text class="name">
                        {{ item.shopName }}
                      </text>
                    </div>
                    <div class="status">{{ item.status }}</div>
                  </div>
                  <div class="goods">
                    <div class="left">
                      <image
                        :src="item.img"
                        mode="scaleToFill"
                        class="goods_img"
                      />
                    </div>
                    <div class="middle">
                      <div class="goods_describe">
                        {{ item.describe }}
                      </div>
                      <div class="goods_size">
                        {{ item.size }}
                      </div>
                    </div>
                    <div class="right">
                      <div class="goods_amount">
                        {{ '￥:' + item.amount }}
                      </div>
                      <div class="goods_num">
                        {{ 'X' + item.num }}
                      </div>
                    </div>
                  </div>
                  <div class="operate">
                    <div class="operate_but">
                      <u-button size="mini">去评价</u-button>
                    </div>
                    <div class="operate_but">
                      <u-button size="mini">再来一单</u-button>
                    </div>
                  </div>
                </div>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import { useOrdersStore } from '@/store/orders'
const ordersStore = useOrdersStore()
export default {
  data() {
    return {
      payList: ordersStore.PayOrdersList,
      sendList: ordersStore.SendOrderList,
      takeList: ordersStore.TakeOrderList,
      rateList: ordersStore.RateOrderList,
      list: [
        {
          name: '待发货'
        },
        {
          name: '待收货'
        },
        {
          name: '待付款'
        },
        {
          name: '待评价'
        }
      ],
      current: 0,
      swiperCurrent: 0,
      dx: 0,
      loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore']
    }
  },
  onLoad() {},
  computed: {},
  methods: {
    // tab栏切换
    change(index) {
      this.swiperCurrent = index
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx)
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}
.swiper-box {
  flex: 1;
}
.swiper-item {
  height: 100%;
}
.card {
  width: 700rpx;
  height: 350rpx;
  margin: auto;
  margin-bottom: 20rpx;
  padding: 20rpx;
}
.icon {
  width: 45rpx;
  height: 45rpx;
  position: relative;
  top: 6rpx;
}
.shop_name {
  float: left;
  font-size: 40rpx;
  font: 1100;
}
.shop_name .name {
  vertical-align: top;
  margin-left: 10rpx;
}
.status {
  float: right;
  margin-top: 10rpx;
  margin-right: 15rpx;
  font-weight: 900;
}
.goods {
  display: flex;
  float: left;
  width: 100%;
  height: 200rpx;
}
.left {
  flex: 1;
  margin-right: 20rpx;
}
.goods_img {
  width: 180rpx;
  height: 180rpx;
  margin-top: 15rpx;
}
.middle {
  flex: 3;
}
.goods_describe {
  width: 100%;
  height: 120rpx;
  font-size: 32rpx;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 20rpx;
}
.goods_size {
  width: 300rpx;
  height: 120rpx;
  font-size: 25rpx;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  color: gray;
}
.right {
  flex: 1;
}
.goods_amount {
  margin-top: 70rpx;
  font-size: 23rpx;
  text-align: center;
}
.goods_num {
  font-size: 24rpx;
  text-align: center;
}
.operate {
  width: 100%;
  height: 60rpx;
  float: left;
}
.operate_but {
  width: 100rpx;
  height: 60rpx;
  float: right;
  position: relative;
  top: -10rpx;
  margin-left: 35rpx;
}
</style>
